<%
  let priceLines = {};
  let partyHeadings = {};

  ['buyer', 'vendor', 'moderator'].forEach((type, index) => {
    partyHeadings[type] = ob[`${type}Name`] ?
      ob.polyT(`orderDetail.summaryTab.disputePayout.${type}HeadingWithName`, { name: ob[`${type}Name`] }) :
        ob.polyT(`orderDetail.summaryTab.disputePayout.${type}Heading`);

    if (!ob.payout) {
      return;
    }

    priceLines[type] = ob.currencyMod.pairedCurrency(
      ob.payout[`${type}Output`] &&
        ob.payout[`${type}Output`].bigAmount ||
        ob.bigNumber(0),
      ob.paymentCoin,
      ob.userCurrency
    );
  });
%>
<h2 class="tx4 margRTn"><%= ob.polyT('orderDetail.summaryTab.disputePayout.heading') %></h2>
<% if (ob.timestamp) { %>
<span class="clrT2 tx5b"><%= ob.moment(ob.timestamp).format('lll') %></span>
<% } %>

<div class="border clrBr padMd">
  <div class="flexRow row">
    <div class="col8 gutterV">
      <div class="flex gutterH clrT">
        <div class="avatarCol disc clrBr2 clrSh1 flexNoShrink" style="<%= ob.getAvatarBgImage(ob.buyerAvatarHashes) %>"></div>
        <div class="flexExpand tx5">
          <div class="rowTn txB"><%= partyHeadings.buyer %></div>
          <div><%= priceLines.buyer %></div>
        </div>
      </div>
      <div class="flex gutterH clrT">
        <div class="avatarCol disc clrBr2 clrSh1 flexNoShrink" style="<%= ob.getAvatarBgImage(ob.vendorAvatarHashes) %>"></span></div>
        <div class="flexExpand tx5">
          <div class="rowTn txB"><%= partyHeadings.vendor %></div>
          <div><%= priceLines.vendor %></div>
        </div>
      </div>
      <div class="flex gutterH clrT">
        <div class="avatarCol disc clrBr2 clrSh1 flexNoShrink" style="<%= ob.getAvatarBgImage(ob.moderatorAvatarHashes) %>"></span></div>
        <div class="flexExpand tx5">
          <div class="rowTn txB"><%= partyHeadings.moderator %></div>
          <div><%= priceLines.moderator %></div>
        </div>
      </div>
    </div>
    <div class="col4 flexHRight">
      <div class="posR">
        <% if (ob.showAcceptButton) { %>
          <%= ob.processingButton({
            className: `btn clrBAttGrad clrBrDec1 clrTOnEmph tx5b js-acceptPayout ${ob.acceptInProgress ? 'processing' : ''} ${ob.acceptConfirmOn ? 'disabled' : '' }`,
            btnText: ob.polyT('orderDetail.summaryTab.disputePayout.btnAcceptPayout')
          }) %>
        <% } %>
        <% if (ob.acceptConfirmOn) { %>
        <div class="js-acceptPayoutConfirmBox confirmBox acceptPayoutConfirm tx5 arrowBoxTop clrBr clrP clrT">
          <div class="tx3 txB rowSm"><%= ob.polyT('orderDetail.summaryTab.disputePayout.acceptPayoutConfirm.title') %></div>
          <p><%= ob.polyT('orderDetail.summaryTab.disputePayout.acceptPayoutConfirm.body') %></p>
          <hr class="clrBr row" />
          <div class="flexHRight flexVCent gutterHLg buttonBar">
            <a class="js-acceptPayoutConfirmCancel"><%= ob.polyT('orderDetail.summaryTab.disputePayout.acceptPayoutConfirm.btnCancel') %></a>
            <a class="btn clrBAttGrad clrBrDec1 clrTOnEmph js-acceptPayoutConfirmed"><%= ob.polyT('orderDetail.summaryTab.disputePayout.acceptPayoutConfirm.btnConfirm') %></a>
          </div>
        </div>
        <% } %>
      </div>
    </div>
  </div>
  <div class="flex gutterH">
    <!-- avatar col is just a spacer here -->
    <div class="avatarCol disc invisible flexNoShrink"></div>
    <div class="flexExpand tx5">
      <%
        const noteFromHeading = ob.moderatorName ?
          ob.polyT('orderDetail.summaryTab.disputePayout.noteFromHeadingWithName', { name: ob.moderatorName }) :
          ob.polyT('orderDetail.summaryTab.disputePayout.noteFromHeading');
      %>
      <div class="rowTn"><%= noteFromHeading %></div>
      <div><%= ob.resolution %></div>
    </div>
  </div>
</div>
